<template>
  <div class="performance-report">
    <div class="page-header">
      <h2>业绩报表</h2>
      <p>查看销售业绩和统计数据</p>
    </div>
    
    <div class="report-content">
      <!-- 统计卡片 -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">💰</div>
          <div class="stat-info">
            <h3>总销售额</h3>
            <p class="stat-value">¥{{ formatNumber(totalSales) }}</p>
            <span class="stat-change positive">+12.5%</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">📦</div>
          <div class="stat-info">
            <h3>订单数量</h3>
            <p class="stat-value">{{ formatNumber(totalOrders) }}</p>
            <span class="stat-change positive">+8.3%</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">👥</div>
          <div class="stat-info">
            <h3>新增客户</h3>
            <p class="stat-value">{{ formatNumber(newCustomers) }}</p>
            <span class="stat-change positive">+15.2%</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">📈</div>
          <div class="stat-info">
            <h3>转化率</h3>
            <p class="stat-value">{{ conversionRate }}%</p>
            <span class="stat-change negative">-2.1%</span>
          </div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="charts-section">
        <div class="chart-card">
          <div class="chart-header">
            <h3>月度销售趋势</h3>
            <div class="chart-controls">
              <select v-model="selectedPeriod" class="period-select">
                <option value="6months">最近6个月</option>
                <option value="12months">最近12个月</option>
                <option value="year">本年度</option>
              </select>
            </div>
          </div>
          <div class="chart-placeholder">
            <div class="chart-mock">
              <div class="chart-bars">
                <div class="bar" style="height: 60%"></div>
                <div class="bar" style="height: 75%"></div>
                <div class="bar" style="height: 45%"></div>
                <div class="bar" style="height: 85%"></div>
                <div class="bar" style="height: 70%"></div>
                <div class="bar" style="height: 90%"></div>
              </div>
              <div class="chart-labels">
                <span>1月</span>
                <span>2月</span>
                <span>3月</span>
                <span>4月</span>
                <span>5月</span>
                <span>6月</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="chart-card">
          <div class="chart-header">
            <h3>产品销售排行</h3>
          </div>
          <div class="ranking-list">
            <div class="ranking-item" v-for="(product, index) in topProducts" :key="product.id">
              <div class="rank-number" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</div>
              <div class="product-info">
                <span class="product-name">{{ product.name }}</span>
                <span class="product-sales">销量: {{ product.sales }}</span>
              </div>
              <div class="sales-bar">
                <div class="bar-fill" :style="{ width: (product.sales / topProducts[0].sales * 100) + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 详细数据表格 -->
      <div class="data-table-section">
        <div class="table-header">
          <h3>详细销售数据</h3>
          <button class="btn btn-export">
            <i class="icon">📊</i>
            导出报表
          </button>
        </div>
        
        <div class="data-table">
          <table>
            <thead>
              <tr>
                <th>日期</th>
                <th>销售额</th>
                <th>订单数</th>
                <th>客单价</th>
                <th>新增客户</th>
                <th>退款金额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="data in salesData" :key="data.date">
                <td>{{ data.date }}</td>
                <td class="amount">¥{{ formatNumber(data.sales) }}</td>
                <td>{{ data.orders }}</td>
                <td class="amount">¥{{ formatNumber(data.avgOrder) }}</td>
                <td>{{ data.newCustomers }}</td>
                <td class="amount refund">¥{{ formatNumber(data.refunds) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PerformanceReport',
  data() {
    return {
      selectedPeriod: '6months',
      totalSales: 1256780,
      totalOrders: 3456,
      newCustomers: 234,
      conversionRate: 3.8,
      topProducts: [
        { id: 1, name: 'Nike Air Max 270', sales: 456 },
        { id: 2, name: 'Adidas Ultraboost 22', sales: 389 },
        { id: 3, name: 'Converse Chuck Taylor', sales: 312 },
        { id: 4, name: 'Vans Old Skool', sales: 278 },
        { id: 5, name: 'New Balance 574', sales: 234 }
      ],
      salesData: [
        { date: '2024-01-15', sales: 45680, orders: 123, avgOrder: 371, newCustomers: 15, refunds: 2340 },
        { date: '2024-01-14', sales: 38920, orders: 98, avgOrder: 397, newCustomers: 12, refunds: 1890 },
        { date: '2024-01-13', sales: 52340, orders: 145, avgOrder: 361, newCustomers: 18, refunds: 3120 },
        { date: '2024-01-12', sales: 41560, orders: 112, avgOrder: 371, newCustomers: 14, refunds: 2560 },
        { date: '2024-01-11', sales: 48790, orders: 134, avgOrder: 364, newCustomers: 16, refunds: 2890 }
      ]
    };
  },
  methods: {
    formatNumber(num) {
      return num.toLocaleString('zh-CN');
    }
  }
};
</script>

<style scoped>
.performance-report {
  padding: 0;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #2c3e50;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.report-content {
  space-y: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

.stat-info h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.stat-value {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

.stat-change.positive {
  background: #d4edda;
  color: #155724;
}

.stat-change.negative {
  background: #f8d7da;
  color: #721c24;
}

.charts-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
}

.period-select {
  padding: 6px 12px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-bars {
  flex: 1;
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 20px 0;
}

.bar {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px 4px 0 0;
  min-height: 20px;
  transition: all 0.3s ease;
}

.bar:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 12px;
  color: #6c757d;
}

.ranking-list {
  space-y: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f3f4;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.rank-number.top-three {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.product-sales {
  font-size: 12px;
  color: #6c757d;
}

.sales-bar {
  width: 80px;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  
}

.bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.data-table-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-export {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.btn-export:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.btn .icon {
  margin-right: 8px;
  font-size: 16px;
}

.data-table {
  overflow-x: auto;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.data-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.data-table td {
  font-size: 14px;
  color: #495057;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

.amount {
  font-weight: 600;
  color: #28a745;
}

.amount.refund {
  color: #dc3545;
}

@media (max-width: 768px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>